<template>
  <div id="navHead">
    <div id="navHead_inside">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#409EFF" text-color="#fff" active-text-color="#ffd04b">
        <!-- 菜单按钮 -->
        <el-menu-item index="/homeView">首页</el-menu-item>
        <el-menu-item index="/aboutView">竞价公告</el-menu-item>
        <el-menu-item index="/biddingPublicityView">竞价结果公示</el-menu-item>
        <!-- <el-menu-item index="4">积分商城</el-menu-item> -->
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: sessionStorage.getItem('userPageStatus'),
    }
  },
  methods: {
    // 菜单激活回调
    handleSelect(key, keyPath) {
      if (key == '/homeView') {
        this.$router.push({ path: '/homeView' })
        console.log('/homeView')
      } else if (key == '/aboutView') {
        this.$router.push({ path: '/aboutView' })
        console.log('/aboutView')
        // router.go("/about")
      } else if (key == '/biddingPublicityView') {
        this.$router.push({ path: '/biddingPublicityView' })
        console.log('/biddingPublicityView')
      }
    },
  },
}
</script>
<style scoped>
/* 第三层导航栏 */
#navHead {
  height: 40px;
  background-color: #409eff;
}
#navHead_inside {
  width: 80%;
  margin: auto;
}
.el-menu-demo {
  display: block;
  height: 40px;
}
.el-menu-item {
  float: left;
  height: 40px;
  line-height: 40px;
}
</style>